@layer recipes {
  [data-scope="marquee"][data-part="root"] {
    width: 100%;
    max-width: 600px;
    overflow: hidden;
  }

  [data-scope="marquee"][data-orientation="vertical"][data-part="root"] {
    height: 400px;
  }

  [data-scope="marquee"][data-orientation="horizontal"][data-part="root"] {
    width: 100%;
    height: 120px;
  }

  [data-scope="marquee"][data-paused] {
    &,
    * {
      animation-play-state: paused !important;
    }
  }

  [data-scope="marquee"][data-part="content"] {
    animation-timing-function: linear;
    animation-duration: var(--marquee-duration);
    animation-delay: var(--marquee-delay);
    animation-iteration-count: var(--marquee-loop-count);
  }

  [data-scope="marquee"][data-part="content"][data-side="start"],
  [data-scope="marquee"][data-part="content"][data-side="end"] {
    animation-name: marqueeX;
  }

  [data-scope="marquee"][data-part="content"][data-side="top"],
  [data-scope="marquee"][data-part="content"][data-side="bottom"] {
    animation-name: marqueeY;
  }

  [data-scope="marquee"][data-part="content"][data-reverse] {
    animation-direction: reverse;
  }

  @media (prefers-reduced-motion: reduce) {
    [data-scope="marquee"][data-part="content"] {
      animation: none !important;
    }
  }

  @keyframes marqueeX {
    0% {
      transform: translateX(0%);
    }
    100% {
      transform: translateX(var(--marquee-translate));
    }
  }

  @keyframes marqueeY {
    0% {
      transform: translateY(0%);
    }
    100% {
      transform: translateY(var(--marquee-translate));
    }
  }

  [data-scope="marquee"][data-part="edge"] {
    z-index: 10;
    pointer-events: none;

    &[data-side="start"] {
      width: 20%;
      background: linear-gradient(
        to right,
        var(--colors-bg-code-block),
        transparent
      );

      &[dir="rtl"] {
        background: linear-gradient(
          to left,
          var(--colors-bg-code-block),
          transparent
        );
      }
    }

    &[data-side="end"] {
      width: 20%;
      background: linear-gradient(
        to left,
        var(--colors-bg-code-block),
        transparent
      );

      &[dir="rtl"] {
        background: linear-gradient(
          to right,
          var(--colors-bg-code-block),
          transparent
        );
      }
    }

    &[data-side="top"] {
      height: 20%;
      background: linear-gradient(
        to bottom,
        var(--colors-bg-code-block),
        transparent
      );
    }

    &[data-side="bottom"] {
      height: 20%;
      background: linear-gradient(
        to top,
        var(--colors-bg-code-block),
        transparent
      );
    }
  }

  /* Item styles */
  [data-scope="marquee"][data-part="item"] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    background: var(--colors-bg-subtle);
    border: 1px solid var(--colors-border-subtle);
    border-radius: 6px;
    white-space: nowrap;
    user-select: none;
  }

  .marquee-logo {
    font-size: 32px;
    line-height: 1;
  }

  .marquee-name {
    font-size: 16px;
    font-weight: 500;
    color: var(--colors-text-bold);
  }
}
